<style scoped lang="less">
  .my-portrait{
    overflow: hidden;
  }
  .portrait-box{
    img{
      display: block;
      width:200px;
    }
  }
  .ryt{
    font-size: 22px;
    color: #258AFE;
    padding: 50px;
    letter-spacing: 2px;
  }
  .change-text{
    font-weight: bold;
    width: 100px;
    text-align: center;
    font-size: 16px;
    margin: 0 auto;
    line-height: 30px;
    border-radius: 17px;
    border: 2px solid #aaa;
    cursor: pointer;
    color: #aaa;
  }
  .editor-info{
    padding-top: 50px;
    a{
      display: block;
      text-align: center;
      color: #fff;
      font-size: 18px;
      line-height: 36px;
      padding: 0 20px;
      background: url("../../../static/image/ts_2.png");
      background-size: 100% 100%;
    }
  }
  .info-box{
    padding-top: 20px;
    li{
      padding-top: 50px;
      font-size: 16px;
      font-weight: bold;
      color: #000;
      letter-spacing: 1px;
    }
  }
  .like{
    .title{
      padding-top: 50px;
      font-size: 16px;
      font-weight: bold;
      color: #000;
      letter-spacing: 1px;
    }
    .label{
      li{
        width: 25%;
        padding-top: 30px;
        .label-item{
          width: 150px;
          text-align: center;
          color: #888;
          border: 2px solid #888;
          line-height: 32px;
          font-size: 16px;
          font-weight: bold;
          letter-spacing: 2px;
        }
      }
    }
  }
</style>
<template>
  <div id="myinfo">
    <div class="my-portrait">
      <div class="left portrait-box">
        <img :src="perInfo.headimg">
      </div>
      <div class="left">
        <p class="ryt">
          我的头像
        </p>
        <p @click="cropperPic = true" class="change-text">
          更换头像
        </p>
      </div>
      <div class="right editor-info">
        <a @click="$router.push('/Personal/PersonalEditor')" href="javascript: void(0)">
          编辑信息
        </a>
      </div>
      <div class="clear"></div>
    </div>
    <div class="info-box">
      <ul>
        <li>
          姓名： {{ perInfo.nickname }}
        </li>
        <li>
          所在城市： {{ perInfo.province? perInfo.province + ' ' + perInfo.city : '您尚未选择城市' }}
        </li>
        <li>
          手机号： {{ perInfo.mobile }}
        </li>
        <li>
          现在开的车型： {{ perInfo.now_car_ca_pname? perInfo.now_car_ca_pname + ' ' + perInfo.now_car_ca_name + '  ' + perInfo.now_car: '您尚未选择现在开的车型' }}
        </li>
        <li>
          喜欢的车型： {{ perInfo.like_car_ca_pname? perInfo.like_car_ca_pname + ' ' + perInfo.like_car_ca_name + '  ' + perInfo.like_car: '您尚未选择喜欢的车型' }}
        </li>
        <li>
          职业类型： {{ perInfo.work? perInfo.work : '您尚未填写职业类型' }}
        </li>
      </ul>
    </div>
    <div class="like">
      <div class="title">
        喜欢的标签：{{ hasLabel === 1 ? '' : '您尚未选择喜欢的类型' }}
      </div>
      <div class="label">
        <ul>
          <li v-for="label in perInfo.label" class="left">
            <div class="label-item">
              {{ label }}
            </div>
          </li>
          <div class="clear"></div>
        </ul>
      </div>
    </div>
    <div v-if="cropperPic" @mousewheel.prevent class="cropper-pic">
      <div class="cropper-index" style="display:block;">
        <div class="info-item" style="flex:1;">
          <label class="btn btn-orange" for="uploads"
                 style="display:inline-block;width: 70px;padding: 0;text-align: center;line-height: 28px;">选择图片</label>
          <input type="file" id="uploads" :value="imgFile" style="position:absolute; clip:rect(0 0 0 0);"
                 accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event, 1)">
          <input type="button" class="oper"
                 style="line-height: 20px;height:20px;width:23px;font-size:20px;margin:3px 5px;transform: translateY(2px);overflow: visible"
                 value="+" title="放大" @click="changeScale(1)">
          <input type="button" class="oper"
                 style="line-height: 20px;height:20px;width:23px;font-size:20px;margin:3px 5px;transform: translateY(2px);overflow: visible"
                 value="-" title="缩小" @click="changeScale(-1)">
          <input type="button" class="oper"
                 style="line-height: 20px;height:20px;width:23px;font-size:20px;margin:3px 5px;transform: translateY(2px);overflow: visible"
                 value="↺" title="左旋转" @click="rotateLeft">
          <input type="button" class="oper"
                 style="line-height: 20px;height:20px;width:23px;font-size:20px;margin:3px 5px;transform: translateY(2px);overflow: visible"
                 value="↻" title="右旋转" @click="rotateRight">
        </div>
        <div class="line" style="margin-top: 10px;">
          <div class="cropper-content">
            <div class="cropper">
              <vueCropper
                ref="cropper"
                :img="option.img"
                :outputSize="option.size"
                :outputType="option.outputType"
                :info="true"
                :full="option.full"
                :canMove="option.canMove"
                :canMoveBox="option.canMoveBox"
                :original="option.original"
                :autoCrop="option.autoCrop"
                :autoCropWidth="option.autoCropWidth"
                :autoCropHeight="option.autoCropHeight"
                :fixedBox="option.fixedBox"
                @realTime="realTime"
              ></vueCropper>
            </div>
            <div style="margin-left:20px;">
              <div class="show-preview"
                   :style="{'width': '150px', 'height':'155px',  'overflow': 'hidden', 'margin': '5px'}">
                <div :style="previews.div" class="preview">
                  <img :src="previews.url" :style="previews.img">
                </div>
              </div>
              <div @click="finish('blob')" class="cancel-btn">
                确定更换
              </div>
              <div @click="cancelChangeImg" class="cancel-btn">
                取消
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {VueCropper} from 'vue-cropper'
  export default {
    name: 'PersonalInfo',
    components: {
      VueCropper
    },
    props: {
      perInfo: {
        defult: {}
      },
      hasLabel: {
        default: 1
      }
    },
    data () {
      return {
        // 图片裁剪
        previews: {},
        imgData: {},
        option: {},
        optionBak: {
          img: '',
          outputSize: 1,
          full: false,
          outputType: 'png',
          canMove: true,
          original: false,
          canMoveBox: true,
          autoCrop: true,
          autoCropWidth: 150,
          autoCropHeight: 150,
          fixedBox: true
        },
        fileName: '',
        imgFile: '',
        cropperPic: false
      }
    },
    methods: {
      // 裁剪图片
      changeScale (num) {
        num = num || 1
        this.$refs.cropper.changeScale(num)
      },
      rotateLeft () {
        this.$refs.cropper.rotateLeft()
      },
      rotateRight () {
        this.$refs.cropper.rotateRight()
      },
      cancelChangeImg: function () {
        this.cropperPic = false
        this.option = JSON.parse(JSON.stringify(this.optionBak))
      },
      finish (type) {
        let that = this
        let fd = new FormData()
        // 输出
        if (type === 'blob') {
          this.$refs.cropper.getCropBlob((data) => {
            let img = window.URL.createObjectURL(data)
            fd.append('headimg', data)
            that.$chaos.ajax({
              url: '/User/getUpdateUserData',
              userinfo: true,
              data: fd,
              file: true,
              callback: function (type, res) {
                if (type === 'success') {
                  that.cropperPic = false
                  that.option = JSON.parse(JSON.stringify(that.optionBak))
                  that.perInfo.headimg = img
                  that.$emit('changeHeadimg', img)
                }
              }
            })
          })
        } else {
          this.$refs.cropper.getCropData((data) => {
          })
        }
      },
      realTime (data) {
        this.previews = data
      },
      uploadImg (e, num) {
        var that = this
        // 上传图片
        var file = e.target.files[0]
        that.fileName = file.name
        if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(e.target.value)) {
          that.$swal({
            title: '请选择一张图片',
            type: 'error'
          })
          return false
        }
        var reader = new FileReader()
        reader.onload = (e) => {
          let data
          if (typeof e.target.result === 'object') {
            // 把Array Buffer转化为blob 如果是base64不需要
            data = window.URL.createObjectURL(new Blob([e.target.result]))
          } else {
            data = e.target.result
          }
          if (num === 1) {
            that.option.img = data
          } else if (num === 2) {
            that.example2.img = data
          }
        }
        // 转化为base64
        // reader.readAsDataURL(file)
        // 转化为blob
        reader.readAsArrayBuffer(file)
      },
      setCrumbs: function () {
        let crumbs = []
        crumbs[0] = {
          title: '个人中心',
          link: ''
        }
        crumbs[1] = {
          title: '基本信息',
          link: ''
        }
        this.$store.commit('crumbs', crumbs)
      }
    },
    created () {
      this.option = JSON.parse(JSON.stringify(this.optionBak))
      this.$emit('changeCurrent', 1)
      this.setCrumbs()
    },
    activated () {
      this.setCrumbs()
    }
  }
</script>

<style lang="less">
  .cropper-pic {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(0, 0, 0, .3);
    .cropper-index {
      background: #fff;
      width: 500px;
      position: absolute;
      padding: 20px;
      border-radius: 10px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .cancel-btn {
    width: 120px;
    line-height: 32px;
    font-size: 16px;
    color: #fff;
    background: #FF5469;
    margin: 10px auto 0;
    text-align: center;
    border-radius: 16px;
    cursor: pointer;
  }

  .info-item input {
    cursor: pointer;
  }

  .btn-orange {
    font-size: 14px;
    cursor: pointer;
  }

  .btn-blue {
    font-size: 14px;
  }

  .info {
    width: 720px;
    margin: 0 auto;
    .oper-dv {
      height: 20px;
      text-align: right;
      margin-right: 100px;
      a {
        font-weight: 500;
        &:last-child {
          margin-left: 30px;
        }
      }
    }
    .info-item {
      margin-top: 15px;
      label {
        display: inline-block;
        width: 100px;
        text-align: right;
      }
      .sel-img-dv {
        position: relative;
        .sel-file {
          position: absolute;
          width: 90px;
          height: 30px;
          opacity: 0;
          cursor: pointer;
          z-index: 2;
        }
        .sel-btn {
          position: absolute;
          cursor: pointer;
          z-index: 1;
        }
      }
    }
  }

  .cropper-content {
    display: flex;
    display: -webkit-flex;
    .cropper {
      width: 260px;
      height: 260px;
    }
    .show-preview {
      flex: 1;
      -webkit-flex: 1;
      display: flex;
      display: -webkit-flex;
      justify-content: center;
      -webkit-justify-content: center;
      background: url("");
      .preview {
        overflow: hidden;
        border-radius: 50%;
        border: 1px solid #cccccc;
        background: #cccccc;
        margin-left: 40px;
      }
    }
  }

  .cropper-content .show-preview .preview {
    margin-left: 0;
    border: none !important;
  }
</style>

